<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/static/m/jsp/include.jsp"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分享宝贝详情</title>
    <link rel="stylesheet" href="${path}/static/h5/css/swiper.min.css">
    <link rel="stylesheet" href="${path}/static/h5/css/style.css">
    <link rel="stylesheet" href="${path}/static/h5/css/waterfull.css">
    <style>
        .shop_profile .size span{
            margin-right: 4vw;
        }
    </style>
    <script>
        $(function () {

            console.log(${goods.goodsTime})

            if(0 == ${info}){
                return layer.msg("内容不存在");
            }

            //轮播图
            var imgs = '${goods.goodsImgs}';
            var imgArr = imgs.split(',');
            var htmls = '';
            for(var i = 0; i < imgArr.length; i++){
                htmls += '<div class="swiper-slide"><img src="${path}/download?id='+imgArr[i]+'"></div>';
            }
            $("#goodsImgs").append(htmls);


            //关键字
            var tars = '${goods.goodsTarNameList}';
            if(null != tars && "" != tars){
                //有关键字
                var html2 = '';
                var tarList = tars.split(',');
                for(var i = 0; i < tarList.length; i++){
                    html2 += '<span class="keyword">'+tarList[i]+'</span>';
                }
                $("#goodsTars").append(html2)
            }

            //评论
            if('${comment}'){
                var html3 = '';
                html3 += '<div class="block_user flex_box">';
                html3 += '<img class="user_avatar" src="${path}/download?id=${comment.headImg}">';
                html3 += '<div class="user_info flex_item">';
                html3 += '<p class="name">${comment.userName}</p>';
                html3 += '<p class="date_time">${comment.createTimeView}</p>';
                html3 += '</div>';
                html3 += '</div>';
                html3 += '<p class="content_desc">${comment.content}</p>';
                $("#comment").append(html3);
            }

            //作品介绍
            var goodsInfo = ${goods.goodsInfo};

            var html4 = '';
            for(var i = 0; i < goodsInfo.length; i++){
                html4 += '<p class="content_desc">'+goodsInfo[i].content+'</p>';
                html4 += '<img src="${path}/download?id='+goodsInfo[i].img+'"/>';
            }
            $("#goodsInfo").append(html4);
        })
    </script>
</head>
<body>
    <div class="share_wrap">

<%--        <div class="head_top_box">
            <div class="share_tabs flex_box">
                <a class="share_tab flex_item on" href="#baby">宝贝</a>
                <a class="share_tab flex_item" href="#author">作品作者</a>
                <a class="share_tab flex_item" href="#similar">更多相似</a>
            </div>
        </div>--%>

        <div class="scroll_box swiper-container" id="baby">
            <div class="swiper-wrapper" id="goodsImgs">
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <div class="block_box">
            <h2 class="shop_title">${goods.goodsName}</h2>
            <div class="shop_profile">

                <c:if test="${goods.artName != null}">
                    <span class="author">作者：${goods.artName}</span>
                </c:if>
                <c:if test="${goods.goodsTime} != null">
                    <span class="year">作品年代：${goods.goodsTime}年</span>
                </c:if>
            </div>
            <div class="shop_profile">

                <span class="size">作品尺寸（厘米）：<span>长${goods.width}</span><span>宽${goods.height}</span>

                        <c:if test="${goods.high} != null">
                            <span>高${goods.high}</span>
                        </c:if>

                </span>
            </div>
        </div>

        <div class="block_box mt_20">
            <div class="shop_info">
                <div class="info_item">
                    <img class="item_icon" src="${path}/static/h5/imgs/icon_nation.png"/>
                    <span class="txt">国家编码：</span>
                    <c:if test="${goods.conNum != null}">
                        <span class="txt">${goods.conNum}</span>
                    </c:if>

                </div>
                <div class="info_item">
                    <img class="item_icon" src="${path}/static/h5/imgs/icon_author.png"/>
                    <span class="txt">作者上传：</span>
                    <img class="info_author" src="${path}/download?id=${goods.authorHeadimg}"/>
                    <span class="txt">${goods.artName}</span>
                </div>
                <div class="info_item">
                    <img class="item_icon" src="${path}/static/h5/imgs/icon_link.png"/>
                    <span class="txt">区块链存证时间：</span>
                    <c:if test="${goods.ethTradeTime != null}">
                        <span class="txt">${goods.ethTradeTimeView}</span>
                    </c:if>
                </div>
            </div>
            <div class="keywords_wrap flex_box">
                <span class="name">关键字：</span>
                <div class="keywords_box flex_item" id="goodsTars">
                </div>
            </div>
        </div>

        <div class="block_box mt_20">
            <h2 class="block_head"><span>发表看法</span><%--<sup class="tip">9</sup>--%></h2>
            <div class="block_evaluation" id="comment">
            </div>
        </div>

        <div class="block_box mt_20">
            <h2 class="block_head"><span>作品介绍</span></h2>
            <div class="block_desc" id="goodsInfo">

            </div>
        </div>

        <div class="scroll_box block_box mt_20" id="author">
            <h2 class="block_head"><span>作者介绍</span></h2>
            <div class="flex_box mt_20">
                <img class="author_avatar" src="${path}/download?id=${goods.authorHeadimg}">
                <div class="author_info flex_item">
                    <p class="name">${user.userName}</p>
                    <p class="desc">${user.artInfo}</p>
                </div>
            </div>
        </div>

        <div class="scroll_box block_box mt_20" id="similar">
            <h2 class="more_head">更多相似</h2>
        </div>

        <div class="waterfull clearfix">
            <ul>

                <c:forEach items="${goodsList}" var="item" >


                    <li class="item">
                        <a href="javascript:void(0);" class="a-img">
                            <img src="${path}/download?id=${item.goodsImg}" alt="">
                        </a>
                        <div class="content">
                            <div class="item_head">
                                <div class="label">
                                    <i class="icon icon_link"></i>
                                    <i class="icon icon_author"></i>
                                    <i class="icon icon_nation"></i>
                                </div>
                                <h3 class="title">${item.goodsName}</h3>
                            </div>
                            <div class="info">
                                <c:if test="${item.artName != null}">
                                    <span class="author">作者：${item.artName}</span>
                                </c:if>
                                <c:if test="${item.goodsTime != null}">
                                    <span class="year">${item.goodsTime}年</span>
                                </c:if>
                            </div>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </div>

        <div class="share_footer">
            <img class="share_logo" src="${path}/static/h5/imgs/share_logo.png">
            <a class="share_btn" href="#">下载App</a>
        </div>

    </div>

    <script src="${path}/static/h5/js/jquery.min.js"></script>
    <script src="${path}/static/h5/js/swiper.min.js"></script>
    <script src="${path}/static/h5/js/jquery.masonry.min.js"></script>
    <script src="${path}/static/h5/js/jQeasing.js"></script>
    <script>
        //轮播
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            loop:true,
            pagination: {
                el: '.swiper-pagination',
            },

            observer:true,
            observeParents:true

        });


        // tabs跟随滚动
        var nav = $(".share_tabs");
        var mainPage = $(".scroll_box");
        var mainTopArr = new Array();
        for(var i=0;i<mainPage.length;i++){

            mainTopArr.push(mainPage.eq(i).offset().top);
        }
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            var k;
            for(var i=0;i<mainTopArr.length;i++){
                console.log(mainTopArr[i])
                if(scrollTop>=mainTopArr[i]-80){
                    k=i;
                }
            }
            nav.find("a").eq(k).addClass("on").siblings().removeClass("on");
        });
        nav.find("a[href^='#']").click(function(e){
            e.preventDefault();
            $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
        });


        var container = $('.waterfull');
            container.imagesLoaded(function() {
                container.masonry({
                    itemSelector: '.item',
                    isFitWidth: true, //是否根据浏览器窗口大小自动适应默认false
                    isAnimated: true, //是否采用jquery动画进行重拍版
                    isRTL: false, //设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
                    isResizable: true, //是否自动布局默认true
                    animationOptions: {
                        duration: 800,
                        easing: 'easeInOutBack', //如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
                        queue: false //是否队列，从一点填充瀑布流
                    }
                });
            });
    </script>
</body>
</html>